<template>
	<el-col :span="24" id="content3_container">
		<!-- <el-col :span="24" id="blocksntxs"> -->
			<el-col :span="12" class="area">
				<div class="tabletitle">
					<!-- <div id="blockicon"></div> -->
					<span id="blockicon"></span>
					<span class="title" id="iblocktitle">区块</span>
					<span class="iconmore"></span>
					<span class="viewall">
						<router-link to="/blocks" class="viewalltitle">查看全部</router-link>
					</span>
				</div>
				<!-- <br/> -->
				<el-col :span="24" id="blocktable">
					<el-table :data="blocktableData" tooltip-effect="dark" 
					height="100%" style="width: 98%" 
					:row-style="rowClass" @row-click="blockreaddetail" id="blocksinfotable">
						<el-table-column prop="number" width="100%" label="编号" align="left"/>
						<el-table-column prop="hash" :show-overflow-tooltip="true" label="区块ID" align="left"/>
						<el-table-column prop="txs" label="交易数" width="115%" align="left"/>
						<el-table-column prop="mineTime" label="时间" :show-overflow-tooltip="true" align="left" :formatter="timeformatter"/>
					</el-table>
				</el-col>
			</el-col>

			<el-col :span="12" class="area">
				<div class="tabletitle leftalign" >
					<span id="txicon"></span>
					<span class="title" id="itxtitle">交易</span>
					<span class="iconmore"></span>
					<span class="viewall">
						<router-link to="/transactions" class="viewalltitle">查看全部</router-link>
					</span>
				</div>

				<el-col :span="24" id="txtable" class="leftalign">
					<el-table :data="txtableData" tooltip-effect="dark" 
					height="100%" style="width: 98%" :row-style="rowClass" 
					@row-click="txreaddetail" id="txsinfotable">
						<el-table-column prop="type" width="100%" label="类型" align="left"/>
						<el-table-column prop="extra.marketName" label="所属市场" :show-overflow-tooltip="true" align="left"/>
						<el-table-column prop="mark" label="单号" :show-overflow-tooltip="true" align="left"/>
						<el-table-column prop="time" label="时间" :show-overflow-tooltip="true" align="left" :formatter="timeformatter"/>
					</el-table>
				</el-col>
			</el-col>
		<!-- </el-col> -->
	</el-col>
</template>

<script>

	import herderjs from "../utils/header.js"

	export default {
		//当前组件定义的变量
		data () {
			return {
				blocklist: "",
				txlist: "",
				blocknum: null,
				blockid: null,
			    blocktableData: null,
			    txtableData: null,
			    flag1: false,
			    flag2: false,
			    refresh_flag: true
			}
		},
		//当前组件创建时调用
		created () {
			this.setData()
		},
		//组件挂载时调用
		mounted() {
			herderjs.$on('refresh_flag', (data) => { 
				this.refresh_flag = data
			})
			herderjs.$on('val', (data) => {
		        if (data===2 && this.refresh_flag) {
		        	// console.log("33333333")
	    			let _this = this
					setTimeout(function () {
						// console.log("33333333")
						_this.setData(data)
					}, 10000)
	    		}
		    })
		},
		//组件销毁时调用
		destroyed () {
			//向在全局定义的eventBus中传递参数，实现组件间传值
			if(this.blocklist != "") {
				eventBus.$emit('blockdetail',this.blocklist)
			}
			if(this.txlist != "") {
				eventBus.$emit('txdetail',this.txlist)
			}
			
		},
		//当前组件中定义的方法
		methods: {

			rowClass: function (row, index) {
				return { "cursor": "pointer" }
			},

			timeformatter: function(row, column) {
				let date
				let temp = row.time
				if(row.time===undefined)
				{
					temp = row.mineTime
				}
				if(temp.toString().length===10)
				{
					date = new Date(temp * 1000)
				} else {
					date = new Date(temp)
				}
				let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
				function paddNum(s) {
					s += ""
					return s.replace(/^(\d)$/,"0$1");
				}
				let h = paddNum(date.getHours());
				let m = paddNum(date.getMinutes());
				let s = paddNum(date.getSeconds());
				a = a + " " + h + ":" + m + ":" + s
				// if (date.getHours() < 12) {
				// 	a = a + " AM"
				// } else {
				// 	a = a + " PM"
				// }
				return a;
			},

			blockreaddetail(row, event, column) {
				let param = {hash:row.hash}
				this.$api.post('blockchain/block', param, r => {
					this.blocklist = r
					this.$router.push(`/blocks/${JSON.stringify(r.data.hash)}`)
				})
			},

			txreaddetail(row, event, column) {
				let param = {txHash:row.txHash}
				this.$api.post('blockchain/tx', param, r => {
					console.log(row.txHash)
					this.txlist = r
					this.$router.push(`/transactions/${JSON.stringify(r.data.txHash)}`)
				})
			},

			setData (val){
				// this.current_time = parseInt(new Date().valueOf() / 1000)
				// console.log(this.current_time)
				let param = {itemsPerPage:10,whichPage:1}
				//请求5个区块信息
				this.$api.post('blockchain/blocks', param, r => {
					this.blocktableData = r.data
					this.flag1 = true
					if (this.flag1===true && this.flag2=== true) {
						herderjs.$emit('val',val + 1)
						this.flag1 = false
						this.flag2 = false
					}
				})
				//请求5个交易信息
				this.$api.post('blockchain/txs', param, r => {
					this.txtableData = r.data
					this.txtableData.forEach(function(i,index) {
						let a
						switch (i.type) {
							case "RetailInfo": a="零售单"; i["type"]=a; break;
							case "SaleInfo" : a="销售单"; i["type"]=a; break;
							case "PurchaseInfo" : a="进货单"; i["type"]=a; break;
							case "ReceiveInfo" : a="收货单"; i["type"]=a; break;
							case "AccessCertificate" : a="准入证明"; i["type"]=a; break;
							case "Market" : a="市场检查表"; i["type"]=a; break;
							case "Gov" : a="日常检查表"; i["type"]=a; break;
							default : console.log("haven't such type"); break;
						}
					})
					this.flag2 = true
					if (this.flag1===true && this.flag2===true) {
						herderjs.$emit('val',val + 1)
						this.flag1 = false
						this.flag2 = false
					}
				})
			}
		}
	}
</script>

<style scoped>

	#content3_container {
		margin-top: 10px;
		height: 50.8%;
		/*box-shadow: 0 2px 4px 0 rgba(179,179,179,0.50);*/
		/*padding: 10px;*/
	}

	.leftalign {
		margin-left: 1.2%;
	}

	.area {
		border-radius:5px;
		height: 90%;
		width: 49.7%;
		margin-left: 0.3%;

	}

	.tabletitle {
		background-color: rgb(255, 255, 255);
		height: 8%;
		width: 98%;
		padding-top: 1.5%;
		margin-bottom: 3px;
		border-radius:2px;
		/*display: block;*/
		box-shadow: 0 1px 2px 0 rgba(179,179,179,0.50);
		/*border:0.7px solid #B3B3B3;*/
	}

	.viewalltitle {
		/*margin-right: 3%;*/
		text-decoration: none;
		color: #666666;
		/*height: 10%;*/
		position: relative;
		float: right;
		margin-top: -0.1%;
		/*font-family: SourceHanSansCN-Regular;*/
	}

	#blocktable {
		height: 92%;

	}

	#txtable {
		height: 92%;
	}

	#blockicon {
		float: left;
		width: 5.4%;
		height: 72%;
		/*margin:0 auto;*/
		margin-left: 6px;
		background-image:url('../assets/icon_block_small.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		/*display: inline-block;*/
	}

	#txicon {
		float: left;
		width: 5%;
		/*width: 24px;*/
		height: 75%;
		position: relative;
		/*top: 50%;*/
		/*margin-top: 0.%;*/
		/*height: 70%;*/
		/*margin:0 auto;*/
		margin-left: 6px;
		background-image:url('../assets/icon_trade_small.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		/*display: inline-block;*/
	}

	.title {
		font-size: 0.9vw;
		color: #333333;
		float: left;
		position: relative;
		/*padding-bottom: 10px;*/
		margin-top: -0.08%;
		/*margin-top: 0.45vw;*/
		margin-left: 0.1%;
		/*font-family: SourceHanSansCN-Regular;*/
	}

	.viewall {
		/*position: absolute;*/
		font-size: 0.85vw;
		color: #666666;
	}

	.iconmore {
		width: 3%;
		height: 43%;
		margin:0 auto;
		margin-top: 0.8%;
		background-image:url('../assets/icon_more.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		display: inline-block;
		float: right;
	}

	#blocksinfotable {
		/*overflow: hidden;*/
		/*overflow-y: scroll;*/
		/*height: 80%;*/
		/*height: 100%;*/
		box-shadow: 0 1px 2px 0  rgba(179,179,179,0.50);
	}

	#txsinfotable {
		/*overflow-y: scroll;*/
		/*height: 10%;*/
		box-shadow: 0 1px 2px 0  rgba(179,179,179,0.50);
	}

</style>